<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
import echarts from "echarts";
export default {
  computed: {},
  components: {},
  created() {},
  mounted() {
    this.getlistdata();
  },
  data() {
    return {
      originalArray: [],
      timeCategories: [
        { start: "00:00", end: "01:15" },
        { start: "01:15", end: "02:30" },
        { start: "02:30", end: "03:45" },
        { start: "03:45", end: "05:00" },
        { start: "05:00", end: "06:15" },
        { start: "06:15", end: "07:30" },
        { start: "07:30", end: "08:45" },
        { start: "08:45", end: "10:00" },
        { start: "10:00", end: "11:15" },
        { start: "11:15", end: "12:30" },
        { start: "12:30", end: "13:45" },
        { start: "13:45", end: "15:00" },
        { start: "15:00", end: "16:15" },
        { start: "16:15", end: "17:30" },
        { start: "17:30", end: "18:45" },
        { start: "18:45", end: "20:00" },
        { start: "20:00", end: "21:15" },
        { start: "21:15", end: "22:30" },
        { start: "22:30", end: "23:45" },
        { start: "23:45", end: "00:15" }, // 调整最后一个时间段
      ],
      classifiedTimes: [],
    };
  },
  methods: {
    finishearch() {
      let option = {
        title: {
          text: "时交易额",
          subtext: "¥元",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // prettier-ignore
          data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 元",
          },
          axisPointer: {
            snap: true,
          },
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: "green",
            },
            {
              gt: 6,
              lte: 8,
              color: "red",
            },
            {
              gt: 8,
              lte: 14,
              color: "green",
            },
            {
              gt: 14,
              lte: 17,
              color: "red",
            },
            {
              gt: 17,
              color: "green",
            },
          ],
        },
        series: [
          {
            name: "Electricity",
            type: "line",
            smooth: true,
            // prettier-ignore
            data:  this.classifiedTimes,
            markArea: {
              itemStyle: {
                color: "rgba(255, 173, 177, 0.4)",
              },
              data: [
                [
                  {
                    name: "上午",
                    xAxis: "07:30",
                  },
                  {
                    xAxis: "11:15",
                  },
                ],
                [
                  {
                    name: "傍晚",
                    xAxis: "17:30",
                  },
                  {
                    xAxis: "21:15",
                  },
                ],
              ],
            },
          },
        ],
      };
      let lineCharts = echarts.init(this.$refs.charts);
      lineCharts.on("updateAxisPointer", function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          lineCharts.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)",
              },
              encode: {
                value: dimension,
                tooltip: dimension,
              },
            },
          });
        }
      });
      lineCharts.setOption(option);
    },
    async getlistdata() {
      let result = await this.$API.member.getmember();
      if (result.code === 200) {
        this.originalArray = result.data;

        this.classifyTimes();
        this.finishearch();
      }
    },
    //ai完成数据处理
    classifyTimes() {
      //---
      this.classifiedTimes = new Array(this.timeCategories.length).fill(0);

      this.originalArray.forEach((obj) => {
        const timestampTime = obj.timestamp.split(" ")[1]; // 获取时间部分
        const [hours, minutes] = timestampTime.split(":").map(Number);
        const timeString = `${hours.toString().padStart(2, "0")}:${minutes
          .toString()
          .padStart(2, "0")}`;

        // 查找时间字符串在时间段数组中的位置
        const categoryIndex = this.timeCategories.findIndex((range) => {
          const startTime = range.start;
          const endTime = range.end === "24:00" ? "23:59" : range.end; // 跨越午夜时将 '24:00' 转换为 '23:59'
          return timeString >= startTime && timeString <= endTime;
        });

        if (categoryIndex !== -1) {
          this.classifiedTimes[categoryIndex] += 168;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 250px;
}
</style>
